<template>
  <div>
    <edu-page-tabs :tab-list="xTabs" />
    <div class="box">
      <el-row type="flex" align="middle" class="header">
        <span class="title">{{ title }}：</span>
        <el-row v-if="type == 'color'" type="flex" class="tab">
          <span
            v-for="item in selectDatas"
            :key="item.title"
            class="item"
            :style="{ backgroundColor: item.value }"
            @click="activeName = item.title"
          >
            <i v-show="activeName == item.title" class="el-icon-success" />
          </span>
        </el-row>
        <el-row v-else-if="type == 'button'" type="flex" class="tab">
          <el-radio-group v-model="activeName">
            <el-radio v-for="item in selectDatas" :key="item.value" :label="item.value">{{ item.title }}</el-radio>
          </el-radio-group>
        </el-row>
      </el-row>
      <div class="content">
        <div class="item">
          <el-row v-if="previewPc" type="flex" class="item-box">
            <span class="title">PC端实例：</span>
            <el-row type="flex" :gutter="20" class="item-flex pc-preview">
              <el-col :span="24">
                <el-image :src="pcSrc" />
              </el-col>
            </el-row>
          </el-row>
          <el-row v-if="previewApp" type="flex" class="item-box">
            <div>
              <span class="title">移动端实例：</span>
              <span class="auxiliary">（APP、H5、小程序）</span>
            </div>
            <el-row type="flex" :gutter="20" class="item-flex app-preview">
              <el-col v-if="propOptions.app_pre" :span="12">
                <el-image :src="appPreSrc" />
              </el-col>
              <el-col v-if="propOptions.app_con" :span="12">
                <el-image :src="appConSrc" />
              </el-col>
            </el-row>
          </el-row>
        </div>
      </div>
      <form-footer :loading="disabledSubmit" confirm-btn-text="保存" :cancel-btn="false" fixed @submit="saveConfig" />
    </div>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import FormFooter from '@/components/form-footer'

export default {
  components: {
    EduPageTabs,
    FormFooter
  },
  props: {
    xUri: {
      type: String,
      required: true
    },
    selectDatas: {
      type: Array,
      required: true,
      default: _ => {
        return [];
      }
    },
    defaultValue: {
      type: String,
      required: true,
      default: ''
    },
    saveKey: {
      type: String,
      required: true,
      default: ''
    },
    saveFieldName: {
      type: String,
      required: true,
      default: ''
    },
    previewType: {
      type: String,
      required: true,
      default: ''
    },
    previewPc: {
      type: Boolean,
      default: true
    },
    previewApp: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '请选择'
    },
    type: {
      type: String,
      default: 'radio'
    },
    xParams: {
      type: Object,
      default: _ => {
        return {};
      }
    },
    xTabs: {
      type: Array,
      default: _ => {
        return [];
      }
    },
    propOptions: {
      type: Object,
      default: _ => {
        return {
          pc: 'pc.png',
          app_pre: 'app_pre.png',
          app_con: 'app_con.png'
        };
      }
    }
  },
  data() {
    return {
      activeName: this.defaultValue,
      disabledSubmit: false
    };
  },
  computed: {
    pcSrc() {
      return '/static/images/' + this.previewType + '/' + this.activeName + '/' + this.propOptions.pc;
    },
    appPreSrc() {
      return '/static/images/' + this.previewType + '/' + this.activeName + '/' + this.propOptions.app_pre;
    },
    appConSrc() {
      return '/static/images/' + this.previewType + '/' + this.activeName + '/' + this.propOptions.app_con;
    }
  },
  created() {
    this.$http.get(
        this.xUri,
        this.xParams,
        response => {
          if (this.$util.isDef(response.data[this.saveFieldName])) {
            this.activeName = response.data[this.saveFieldName];
          }
        },
        _ => {
          this.$message.error('请求出错');
        }
    );
  },
  methods: {
    saveConfig: function () {
      const data = {
        __key: this.saveKey
      };

      data[this.saveFieldName] = this.activeName;

      this.disabledSubmit = true;
      this.$http.post(
          '/admin/system/config/save',
          data,
          response => {
            this.$message.success(response.msg);
            this.disabledSubmit = false;
          },
          error => {
            this.disabledSubmit = false;
            this.$message.error(error.msg);
          },
          false
      );
    }
  }
};
</script>

<style lang="scss">
.box {
  padding-left: 20px;
  padding-bottom: 20px;

  .title {
    font-size: 14px;
    color: #303133;
    width: 150px;
    display: block;
  }

  .header {
    .tab {
      .item {
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon-success {
          font-size: 20px;
          color: #fff;
        }

        & + .item {
          margin-left: 40px;
        }
      }
    }
  }

  .content {
    .item-flex {
      flex: 1;

      &.pc-preview {
        height: 512px;
      }

      &.app-preview {
        height: 638px;
      }
    }

    .item-box {
      margin-top: 15px;
    }

    .auxiliary {
      color: #909399;
      font-size: 12px;
      display: block;
    }

    .item {
      margin-top: 15px;
      width: 900px;

      .el-image {
        width: 100%;
        display: block;
      }
    }
  }

  .suspend-fixed .el-button--medium {
    padding: 10px 30px;
  }
}
</style>
